<template>
  <div id="btnChange">
    <el-collapse v-model="open">
      <el-collapse-item title="组件样式" name="1">
        <ul class="content-list">
          <li>
            <span>按钮形状：</span>
            <div>
              <el-button-group>
                <el-button size="mini" @click="styles.circleBtn=50" type plain>
                  <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                    <use xlink:href="#iconweibiaoti38" />
                  </svg>
                </el-button>
                <el-button size="mini" @click="styles.circleBtn=0" type plain>
                  <svg style="width:20px;height:20px;" class="icon" aria-hidden="true">
                    <use xlink:href="#icontx-zhengfangxing" />
                  </svg>
                </el-button>
              </el-button-group>
            </div>
          </li>
          <li>
            <span>每页行数：</span>
            <div>
              <el-radio v-model="styles.line" label="1">1行</el-radio>
              <el-radio v-model="styles.line" label="2">2行</el-radio>
            </div>
          </li>
          <li>
            <span>每行数量：</span>
            <div>
              <el-radio v-model="styles.num" label="3">3个</el-radio>
              <el-radio v-model="styles.num" label="4">4个</el-radio>
              <el-radio v-model="styles.num" label="5">5个</el-radio>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
    <el-collapse v-model="open2">
      <el-collapse-item title="内容" name="2">
        <ul class="btn-list">
          <li v-for="(v,i) in styles.btnList" :key="i">
            <ul>
              <li>
                <span>按钮图片：</span>
                <div>
                  <div>
                    <upLoadImage :height="39" :v="v"></upLoadImage>
                  </div>
                  <p style="font-size: 12px;color:#999">建议图片尺寸为200x200</p>
                </div>
              </li>
              <li>
                <span>按钮文字：</span>
                <el-input
                  style="width:350px"
                  size="small"
                  type="text"
                  placeholder="请输入内容"
                  v-model="v.word"
                  maxlength="4"
                  show-word-limit
                />
              </li>
              <li>
                <span>跳转链接：</span>
                <div>
                  <uploadUrl :v="v" :width="350"></uploadUrl>
                </div>
              </li>
            </ul>
            <i @click="deleteBtn(i)" class="el-icon-error deleteIcon"></i>
          </li>
        </ul>
        <el-button @click="addBtn" size="small" style="width:100%" plain>
          <i class="el-icon-plus"></i>
          <span>添加按钮({{styles.btnList.length}}/20)</span>
        </el-button>
      </el-collapse-item>
    </el-collapse>

    <el-collapse v-model="activeNames3">
      <el-collapse-item title="内容样式" name="3">
        <ul class="content-list">
          <li>
            <span>文字颜色：</span>
            <div>
              <colorSetting v-model="styles.colorWord" :originColor="styles.colorWord" initColor="#2c2c2c"></colorSetting>
            </div>
          </li>
          <li>
            <span>背景背景：</span>
            <div>
              <colorSetting v-model="styles.colorBg" :originColor="styles.colorBg" initColor="#fff"></colorSetting>
            </div>
          </li>
          <li>
            <span>上间距：</span>
            <div>
              <edgeSetting v-model="styles.marginTop" unit="px" :max="50" :init="Number(styles.marginTop)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>下间距：</span>
            <div>
              <edgeSetting v-model="styles.marginBottom" unit="px" :max="50" :init="Number(styles.marginBottom)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>左右间距：</span>
            <div>
              <edgeSetting v-model="styles.marginLR" unit="px" :max="50" :init="Number(styles.marginLR)"></edgeSetting>
            </div>
          </li>
          <li>
            <span>圆角：</span>
            <div>
              <edgeSetting v-model="styles.circle" unit="px" :max="15" :init="Number(styles.circle)"></edgeSetting>
            </div>
          </li>
        </ul>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import upLoadImage from "../../comm/upLoadImage";
import uploadUrl from "../../comm/uploadUrl";
import { mapState, mapMutations } from "vuex";
import edgeSetting from "../../comm/edgeSetting";
import colorSetting from "../../comm/colorSetting";
export default {
  name: "btnChange",
  data() {
    return {
      open: "1",
      open2: "2",
      activeNames3: "3",
      img: require("../../../assets/img/blank.png"),
    };
  },
  computed: {
    ...mapState(["list", "currentId", "currentName"]),
    styles() {
      return this.list[this.currentId].styles;
    },
  },
  components: {
    edgeSetting,
    upLoadImage,
    uploadUrl,
    colorSetting
  },
  methods: {
    addBtn() {
      if(this.styles.btnList.length>=20){
        return false
      }
      this.styles.btnList.push({
        img: "",
        word: "按钮",
        url: "",
      });
    },
    group(list, num) {
      let index = 0;
      let newArray = [];
      while (index < list.length) {
        newArray.push(list.slice(index, (index += num)));
      }
      return newArray;
    },
    deleteBtn(i) {
      if (this.styles.btnList.length == 1) {
        return false;
      }
      this.styles.btnList.splice(i, 1);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/css/base.less");

#btnChange {
  .line {
    li {
      margin-bottom: 30px;
      > span:nth-of-type(1) {
        margin-right: 20px;
      }
    }
    > li:first-child {
      margin-bottom: 50px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      > div {
        display: flex;
        font-size: 20px;
        > .curCircle {
          color: @blue;
          border: 1px solid @blue;
        }
        > div {
          border: 1px solid #dcdee2;
          padding: 2px 15px;
          position: relative;
          cursor: pointer;
          > span {
            position: absolute;
            left: 15px;
            top: 35px;
          }
        }
      }
    }
  }
  .btn-list {
    margin-bottom: 10px;
    > li:hover {
      > .deleteIcon {
        display: block;
      }
    }
    > li {
      background-color: #f7f7f7;
      padding: 10px;
      position: relative;
      margin-bottom: 10px;
      > ul:nth-of-type(1) {
        margin-left: 10px;
        > li {
          margin-bottom: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        > li:nth-of-type(1) {
          > div {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-left: 10px;
            > div {
              margin-right: 10px;
            }
          }
        }
        > li:nth-of-type(2),
        > li:nth-of-type(3) {
          > span {
            margin-right: 10px;
          }
        }
      }
      > .deleteIcon {
        position: absolute;
        right: 0;
        top: 0;
        font-size: 20px;
        display: none;
      }
    }
  }
}
</style>
